<template>
    <div class="progress-bar" ref="progressBar" @click="progressClick">
        <div class="bar-inner">
            <div class="progress" ref="progress"></div>
            <div class="progress-btn-wrapper" ref="progressBtn"
                 @touchstart.prevent="progressTouchStart"
                 @touchmove.prevent="progressTouchMove"
                 @touchend.prevent="progressTouchEnd"
            >
                <div class="progress-btn"></div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { getStyle } from 'common/js/dom'
    import { setNumOnRange } from 'common/js/util'

    const PROGRESS_BTN_WIDTH = 20
    const BTN_OFFSET = 5

    export default {
        name: 'progress-bar',
        props: {
            currentTime: {
                type: String,
                default: '00:00'
            },
            duration: {
                type: String,
                default: '00:00'
            },
            percent: {
                type: Number,
                default: 0
            }
        },
        methods: {
            progressTouchStart(e) {
                // 设置标志位，限制事件来源
                this.touch.initiated = true
                this.touch.startX = e.touches[0].pageX
                this.touch.left = this.$refs.progress.clientWidth

                this.$emit('progressTouchStart')
            },
            progressTouchMove(e) {
                if (!this.touch.initiated) {
                    return
                }
                const deltaX = e.touches[0].pageX - this.touch.startX

                // 取上下限
                const regionTop = this.$refs.progressBar.clientWidth - PROGRESS_BTN_WIDTH + BTN_OFFSET
                const regionBottom = 0
                const offsetWidth = setNumOnRange(this.touch.left + deltaX, regionTop, regionBottom)

                this._offset(offsetWidth)

                this.$emit('progressTouchMove', this._computePercent())
            },
            progressTouchEnd() {
                this.touch.initiated = false
                this.$emit('percentChange', this._computePercent())
            },
            // 计算当前进度条百分百并抛出事件
            _computePercent() {
                const barWidth =
                    this.$refs.progressBar.clientWidth - PROGRESS_BTN_WIDTH + BTN_OFFSET
                const percent = this.$refs.progress.clientWidth / barWidth

                return percent
            },
            // 改变进度条位置
            _offset(offsetWidth) {
                getStyle(this.$refs.progress, 'width', `${offsetWidth}px`)
                getStyle(this.$refs.progressBtn, 'transform',
                    `translate3d(${offsetWidth}px, 0, 0)`, true)
            },
            progressClick(e) {
                // 点击progressBtn时 e.offsetX会获取到不正确的值
                // this._offset(e.offsetX)
                const rect = this.$refs.progressBar.getBoundingClientRect()
                const offssetWidth = e.pageX - rect.left
                this._offset(offssetWidth)

                this.$emit('percentChange', this._computePercent())
            }
        },
        created() {
            this.touch = {}
        },
        watch: {
            percent(newPercent) {
                // 限制上下限，并设置滑动时屏蔽
                if (newPercent >= 0 && newPercent <= 1 && !this.touch.initiated) {
                    const barWidth = this.$refs.progressBar.clientWidth -
                        PROGRESS_BTN_WIDTH + BTN_OFFSET
                    const offsetWidth = newPercent * barWidth
                    this._offset(offsetWidth)
                }
            }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    .progress-bar
        height: 30px
        .bar-inner
            position: relative
            top: 13px
            height: 4px
            background: rgba(0, 0, 0, 0.3)
            .progress
                position: absolute
                height: 100%
                background: $color-theme
            .progress-btn-wrapper
                position: absolute
                left: -8px
                top: -13px
                width: 30px
                height: 30px
                .progress-btn
                    position: relative
                    top: 7px
                    left: 7px
                    box-sizing: border-box
                    width: 16px
                    height: 16px
                    border-radius: 50%
                    background: $color-text-w
</style>